<!--书籍充值-->
<template>
    <div>
        <el-form :model="queryForm" inline>
            <el-form-item>
                <el-date-picker v-model="queryForm.startDate" placeholder="开始日期" />
            </el-form-item>
            <el-form-item>
                <span>至</span>
            </el-form-item>
            <el-form-item>
                <el-date-picker v-model="queryForm.endDate" placeholder="结束日期" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryData">查询</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" style="width: 100%; margin-top: 20px;" :default-sort="{prop: 'totalAmount', order: 'descending'}">
            <el-table-column prop="bookSource" label="书籍来源" />
            <el-table-column prop="totalAmount" label="总充值金额" sortable />
        </el-table>

        <el-table :data="bookDetails" style="width: 100%; margin-top: 20px;" :default-sort="{prop: 'rechargeAmount', order: 'descending'}">
            <el-table-column prop="id" label="序号" />
            <el-table-column prop="bookSource" label="书籍来源" />
            <el-table-column prop="bookName" label="书籍名称" />
            <el-table-column prop="rechargeAmount" label="充值金额" sortable />
        </el-table>
    </div>
</template>

<script setup>
    import { reactive } from 'vue'
    import { ElMessage } from 'element-plus'

    const queryForm = reactive({
        startDate: '',
        endDate: ''
    })

    const tableData = [
        { bookSource: '伏天', totalAmount: '¥317.4' },
        { bookSource: '久伴', totalAmount: '¥69.52' },
        { bookSource: '书籍来源空', totalAmount: '¥20' },
        { bookSource: '非凡观文', totalAmount: '¥0.02' }
    ]

    const bookDetails = [
        { id: 1, bookSource: '伏天', bookName: '薛薇', rechargeAmount: '¥29.9' },
        { id: 2, bookSource: '书籍来源空', bookName: '书籍来源空', rechargeAmount: '¥20' },
        { id: 3, bookSource: '久伴', bookName: '躺到状态巅后，我反而爆红全网', rechargeAmount: '¥19.9' },
        { id: 4, bookSource: '久伴', bookName: '之前把姜当狗，我转生悔悟，他疯了', rechargeAmount: '¥19.9' },
        { id: 5, bookSource: '伏天', bookName: '成长对照组，我和弟弟互换人生', rechargeAmount: '¥19.9' },
        { id: 6, bookSource: '伏天', bookName: '薛薇', rechargeAmount: '¥19.9' },
        { id: 7, bookSource: '伏天', bookName: '知否', rechargeAmount: '¥19.9' },
        { id: 8, bookSource: '伏天', bookName: '重生后满级将青梅太子拱给我', rechargeAmount: '¥19.9' },
        { id: 9, bookSource: '久伴', bookName: '躺到状态巅后，我反而爆红全网', rechargeAmount: '¥9.9' },
        { id: 10, bookSource: '久伴', bookName: '书籍来源空', rechargeAmount: '¥9.9' }
    ]

    const queryData = () => {
        ElMessage.success('查询成功')
    }

    const resetForm = () => {
        queryForm.startDate = ''
        queryForm.endDate = ''
    }
</script>

<style scoped>
    .el-form-item {
        margin-right: 20px;
    }
</style>
